<template>
  <div class="flex-1 pb-50 bg-neutral-10 pt-10">
    <section class="flex-1 pb-50 bg-white">
      <!--$-->
      <main class="w-full max-w-screen-xl px-11 mx-auto">
        <nav class="w-full py-15 flex flex-col">
          <div class="dioa-tabs__root">
            <div
              role="tablist"
              class="dioa-tabs__list flex relative items-center justify-center"
            >
              <a
                v-for="(item, index) in helplist"
                :key="item.id"
                @click="twoListMeun(item.id, index)"
                class="dioa-tabs__tab transition flex items-center justify-center relative outline-none text-2xl px-0 py-5 font-medium ml-12 first:ml-0 text-neutral-50 hover:text-neutral-60 data-selected:text-black disabled:cursor-not-allowed disabled:opacity-40 disabled:text-current"
                :class="{ 'bg-gray': indextab === index }"
                >{{ item.columnName }}</a
              >
            </div>
          </div>
          <hr
            aria-orientation="horizontal"
            class="dioa-divider border-0 border-b w-full h-[0px] border-current text-neutral-30"
          />
        </nav>
        <div class="flex items-start space-x-10">
          <div class="w-full grid gap-10 grid-cols-[276px_1px_auto]">
            <aside class="w-[276px] flex-shrink-0 space-y-5">
              <div class="w-full">
                <div class="space-y-[2px]">
                  <a
                    v-for="(item, index) in helplistnest"
                    :key="item.id"
                    class="block w-full py-[10px] px-4 text-base text-black rounded-md cursor-pointer text-left bg-white hover:bg-neutral-20 data-selected:bg-neutral-20 data-selected:font-medium"
                    :class="{ 'bg-gray-two': indextab1 === index }"
                    @click="lastListMeun(index)"
                    >{{ item.columnName }}</a
                  >
                </div>
              </div>
            </aside>
            <hr
              aria-orientation="vertical"
              class="dioa-divider border-0 border-l w-[0px] h-full border-current text-neutral-30"
            />
            <ul v-if="!showlist && helplistlast.length > 0" class="textLi">
              <template v-for="item in helplistlast" :key="item.id">
                <li>
                  <a @click="showdetai(item)">{{ item.title }}</a>
                </li>
              </template>
            </ul>
            <div v-else-if="!showlist && helplistlast.length == 0">
              <el-empty description="暂无数据" />
            </div>
            <div v-else v-html="showDetai"></div>
          </div>
        </div>
      </main>
      <!--/$-->
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { gethelpListMeun, gethelpNextList } from "@/common/helpApi";
import { helpType, articelListType } from "@/common/utils/helpTpye";
const indextab = ref<number>(0);
const indextab1 = ref<number>(0);
const showlist = ref(false);
const showDetai = ref(null);

// 获取帮助菜单一级
const helplist = ref<helpType[] | any>([]);
gethelpListMeun().then((res) => {
  // console.log("获取菜单", res);
  helplist.value = res.data;
  twoListMeun(helplist.value[0].id, indextab.value);
});
//二级菜单
const helplistnest = ref<helpType[] | any>([]);
const helplistlast = ref<articelListType[] | any>([]);
const twoListMeun = (id: string, index: number) => {
  indextab.value = index;
  gethelpNextList(id).then((res) => {
    // console.log("获取菜单", res);
    helplistnest.value = res.data;
    lastListMeun(0);
  });
};
// 三级菜单
const lastListMeun = (index: number) => {
  indextab1.value = index;
  // console.log(helplistnest.value[index].columnName);
  helplistlast.value = helplistnest.value[index].articelList;
  showlist.value = false;
};
// 展示最底部数据showdetai
const showdetai = (item: articelListType) => {
  // console.log(item);
  showlist.value = true;
  showDetai.value = item.contentHtml;
};
</script>

<style lang="scss" scoped>
.bg-gray {
  color: #000;
  background: none;
}
.bg-gray-two {
  background: #efefef;
  color: #000;
  font-size: 15px;
}
.textLi {
  li {
    padding: 10px 0;
    border-bottom: 1px dashed #efefef;
    &:hover {
      color: red;
    }
    &:before {
      content: "• "; /* 使用unicode字符作为列表标记 */
      color: black; /* 设置标记的颜色 */
      margin-right: 0.5em; /* 设置标记和列表项之间的间距 */
    }
  }
}
</style>
